<template>
  <div class="app_content_container">
    <Breadcrumb
      :items="[{ label: '置放群组', path: '/computing-mgmt/placement-group' }, name]"
    />
    <div class="content_info">
      <BorderBox title="基本信息">
        <template #title_r>
          <!-- <ga-button type="primary" @click="$refs.addOrEditRef.open()"> 编辑 </ga-button> -->
          <ga-button
            type="primary"
            v-if="id === 'bk'"
            :loading="loading"
            @click="handleSync"
          >
            同步
          </ga-button>
        </template>
        <template #main_info>
          <ga-descriptions
            size="large"
            :column="3"
            :align="{ label: 'right' }"
            :label-style="{ width: '70px' }"
            :value-style="{ minWidth: '180px' }"
          >
            <ga-descriptions-item label="群组名称">
              {{ info?.name || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="亲和性">
              {{ info?.name || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="状态">
              <TagStatus :type="info?.enabled" />
            </ga-descriptions-item>
            <ga-descriptions-item label="云主机数量">
              {{ info?.createBy || "-" }}
            </ga-descriptions-item>
            <ga-descriptions-item label="创建时间">
              {{ info?.createTime || "-" }}
            </ga-descriptions-item>
          </ga-descriptions>
        </template>
      </BorderBox>
      <BorderBox title="云主机" :wrapperStyle="{ margin: '16px 0' }">
        <template #main_info>
          <vm
            height="calc(100vh - 300px)"
            :showOperatBtns="false"
            :vmcolumns="vmcolumns"
            :isRowSelection="false"
            :showFilter="false"
            isPadding0
          />
        </template>
      </BorderBox>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import vm from "common/detailInfo/vm/index.vue";
import { vmcolumns } from "../columns";
// import { getPluginDetail, getBkBizList, getBkCloudList, syncBk } from "@/api/pluginMgmt";

const route = useRoute();
const { id } = route.params;
const { name } = route.query;
const info = ref(null);
import useLoading from "@/hooks/loading";
import { Message } from "@garco-design/web-vue";
const { loading, setLoading } = useLoading(false);

// const fetchPluginDetail = async () => {
//   try {
//     const { code, data } = await getPluginDetail(id);
//     if (code === 20000) info.value = data;
//   } catch (error) {
//     console.log(error);
//   }
// };
onMounted(() => {
  console.log("name--", name);

  // fetchPluginDetail();
});
</script>

<style lang="scss" scoped>
.content_info {
  height: calc(100vh - 132px);
}
</style>
